<template>
  <!-- 时间线 -->
  <div style="width: 100%">
    <div class="timeLine" v-if="$utils.getPc() == 1">
      <div
        class="box"
        v-if="list && list.length > 0"
        @mouseenter="mouseenter"
        @mouseleave="mouseleave"
      >
        <img
          class="left"
          src="../assets/image/investors/ic_left.png"
          @click="left"
        />
        <div class="line"></div>
        <!-- <scroll-bar direction="x" :activeIndex="index"> -->
        <div
          class="item"
          v-for="(item, i) in listYear?.[page]"
          :key="i"
          @click="tabClick(i)"
        >
          <div class="dot-border">
            <div :class="i == index ? 'dot-active' : 'dot'">
              <div class="inner"></div>
            </div>
          </div>
          <div :class="i == index ? 'name-a' : 'name'">{{ item.name }}</div>
        </div>
        <!-- </scroll-bar> -->
        <img
          class="right"
          src="../assets/image/investors/ic_right.png"
          @click="right"
        />
      </div>
    </div>

    <div class="timeLineMobile" v-if="$utils.getPc() == 2">
      <div class="box" v-if="list && list.length > 0">
        <img
          class="left"
          src="../assets/image/investors/ic_left.png"
          @click="left"
        />
        <div class="line"></div>
        <!-- <scroll-bar direction="x" :activeIndex="index"> -->
        <div
          class="item"
          v-for="(item, i) in listYear[page]"
          :key="i"
          @click="tabClick(i)"
        >
          <div class="dot-border">
            <div :class="i == index ? 'dot-active' : 'dot'">
              <div class="inner"></div>
            </div>
          </div>
          <div :class="i == index ? 'name-a' : 'name'">{{ item.name }}</div>
        </div>
        <!-- </scroll-bar> -->
        <img
          class="right"
          src="../assets/image/investors/ic_right.png"
          @click="right"
        />
      </div>
    </div>
  </div>
</template>

<script>
// 代码逻辑比较乱
export default {
  props: {
    timelineData: {
      // 时间轴数据
      type: Array,
      default: () => {
        return [];
      },
    },
    activeYear: {
      // 初始选中年份
      type: Number,
      default: 2020,
    },
    list: Array,
    isloop: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      index: 0,
      listYear: [],
      page: 0,
      timerInterval: null,
      loop: true,
      typePc: 0,
    };
  },
  // unmounted() {
  //   // 页面关闭（路由跳转）时清除定时器
  //   clearInterval(this.timerInterval);
  //   this.timerInterval = null;
  // },
  beforeUnmount() {
    // 页面关闭（路由跳转）时清除定时器
    clearInterval(this.timerInterval);
    this.timerInterval = null;
  },

  watch: {
    list: {
      immediate: true,
      deep: true,
      handler: function () {
        this.listYear = [];
        let page = [];
        let index = 1;
        if (this.list) {
          if (this.list.length < 5) {
            this.listYear.push(this.list);
          } else {
            this.list.forEach((item, i) => {
              if (index == 4) {
                page.push(item);
                this.listYear.push(page);
                page = [];
                index = 1;
              } else {
                page.push(item);
                if (i == this.list.length - 1) {
                  this.listYear.push(page);
                }
                index++;
              }
            });
          }
        }
      },
    },
  },

  mounted() {
    if (this.$utils.getPc() == 1) {
      this.timer();
    }
    // 待优化
    let page = [];
    let index = 1;
    if (this.list && this.list.length > 0) {
      if (this.list.length < 5) {
        this.listYear.push(this.list);
      } else {
        this.list.forEach((item, i) => {
          if (index == 4) {
            page.push(item);
            this.listYear.push(page);
            page = [];
            index = 1;
          } else {
            page.push(item);
            if (i == this.list.length - 1) {
              this.listYear.push(page);
            }
            index++;
          }
        });
      }
    }
  },
  methods: {
    tabClick(i) {
      this.index = i;

      this.$emit("change", this.listYear[this.page][this.index].year);
    },
    mouseleave() {
      this.loop = true;
    },
    /**
     * 停止自动切换
     */
    mouseenter() {
      this.loop = false;
    },

    /**
     * 左箭头事件
     */
    left() {
      // 待优化
      if (this.index > 0) {
        this.index--;
      } else {
        if (this.page > 0) {
          this.page--;
          this.index = 3;
        }
      }
      // if (this.listYear[this.page][this.index] == '全部') {
      //   this.$emit('change', "");
      // } else {
      this.$emit("change", this.listYear[this.page][this.index].year);
      //  }
    },
    // 待优化
    right() {
      if (this.index < this.listYear[this.page].length) {
        if (this.index < 3) {
          this.index++;
        } else {
          if (this.page < 3) {
            this.index = 0;
            this.page++;
          } else {
            this.index = 0;
            this.page = 0;
          }
        }
        // if (this.listYear[this.page][this.index] == '全部') {
        //   this.$emit('change', "");
        // } else {

        if (
          this.page < this.listYear.length &&
          this.index < this.listYear[this.page].length
        ) {
          this.$emit("change", this.listYear[this.page][this.index].year);
        } else {
          this.index = 0;
          this.page = 0;
          this.$emit("change", this.listYear[this.page][this.index].year);
        }
        //    }
      } else {
        this.index = 0;
        this.page = 0;
        this.$emit("change", this.listYear[this.page][this.index].year);
      }
      // else{

      // }
      // console.log("-------------")
      // console.log(this.index);
      // console.log(this.page)
    },
    /**
     * 定时器
     */
    timer() {
      // this.right();
      const that = this;
      // 待优化
      this.timerInterval = setInterval(() => {
        that.$nextTick(() => {
          // console.log("🚀 ~ file: time-line.vue ~ line 230 ~ that.$nextTick ~ that.list", that.listYear)

          if (that.list?.length > 0 && that.loop && that.isloop) {
            if (that.listYear.length > that.page) {
              if (that.index < that.listYear[that.page].length) {
                if (that.index < 3) {
                  that.index++;
                } else {
                  if (that.page < 3) {
                    that.index = 0;
                    that.page++;
                  } else {
                    that.index = 0;
                    that.page = 0;
                  }
                }

                if (
                  that.page < that.listYear.length &&
                  that.index < that.listYear[that.page].length
                ) {
                  that.$emit(
                    "change",
                    that.listYear[that.page][that.index].year
                  );
                } else {
                  that.index = 0;
                  that.page = 0;
                  that.$emit(
                    "change",
                    that.listYear[that.page][that.index].year
                  );
                }
                //   }
              } else {
                that.index = 0;
                that.page = 0;
                that.$emit("change", that.listYear[that.page][that.index].year);
              }
            } else {
              that.index = 0;
              that.page = 0;
              that.$emit("change", that.listYear[that.page][that.index].year);
            }
          }
        });
        // else {
        //   this.index = 0;
        //   this.page = 0;
        // }
      }, 3000);
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .timeLineMobile {
    display: none;
  }

  .timeLine {
    width: 100%;
    position: relative;
    height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    .box {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        cursor: pointer;
        z-index: 1;
        margin-left: 36px;
        margin-top: -30px;
        width: 34px;
        height: 34px;
      }

      .right {
        cursor: pointer;
        z-index: 1;
        margin-right: 36px;
        margin-top: -30px;
        width: 34px;
        height: 34px;
      }

      .line {
        display: flex;
        position: absolute;
        top: 15%;
        width: 100%;
        height: 2px;
        background: #e9e9e9;
      }

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        &:hover {
          .name {
            color: color.$base;
          }
        }

        .dot-border {
          width: 16px;
          height: 16px;
          display: flex;
          justify-content: center;
          align-items: center;

          .dot {
            box-sizing: border-box;
            width: 6px;
            height: 6px;
            background: #333333;
            opacity: 0.5;
            border-radius: 3px;

            .inner {
              width: 6px;
              height: 6px;
            }
          }

          .dot-active {
            box-sizing: border-box;
            z-index: 1;
            width: 16px;
            height: 16px;
            border: 1px solid #eb7803;
            background: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            .inner {
              box-sizing: border-box;
              width: 6px;
              height: 6px;
              background: #eb7803;
              border-radius: 3px;
            }
          }
        }

        .name {
          margin-top: 10px;
          font-size: 20px;
          font-weight: bold;
          color: #2e2e2f;
          line-height: 20px;
        }

        .name-a {
          margin-top: 10px;
          font-size: 20px;
          font-weight: bold;
          color: color.$base;
          line-height: 20px;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .timeLine {
    display: none;
  }

  .timeLineMobile {
    width: 100%;
    position: relative;
    height: fn.rpx(100);

    display: flex;
    flex-direction: column;
    justify-content: center;

    .box {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        cursor: pointer;
        z-index: 1;
        margin-left: fn.rpx(36);
        margin-top: fn.rpx(-30);
        width: fn.rpx(34);
        height: fn.rpx(34);
      }

      .right {
        cursor: pointer;
        z-index: 1;
        margin-right: fn.rpx(36);
        margin-top: fn.rpx(-30);
        width: fn.rpx(34);
        height: fn.rpx(34);
      }

      .line {
        display: flex;
        position: absolute;
        top: 15%;
        width: 100%;
        height: fn.rpx(2);
        background: #e9e9e9;
      }

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .dot-border {
          width: fn.rpx(16);
          height: fn.rpx(16);
          display: flex;
          justify-content: center;
          align-items: center;

          .dot {
            box-sizing: border-box;
            width: fn.rpx(6);
            height: fn.rpx(6);
            background: #333333;
            opacity: 0.5;
            border-radius: fn.rpx(3);

            .inner {
              width: fn.rpx(6);
              height: fn.rpx(6);
            }
          }

          .dot-active {
            box-sizing: border-box;
            z-index: 1;
            width: fn.rpx(16);
            height: fn.rpx(16);
            border: fn.rpx(1) solid #eb7803;
            background: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            .inner {
              box-sizing: border-box;
              width: fn.rpx(6);
              height: fn.rpx(6);
              background: #eb7803;
              border-radius: fn.rpx(3);
            }
          }
        }

        .name {
          margin-top: fn.rpx(10);
          font-size: fn.rpx(20);
          // font-weight: bold;
          color: #2e2e2f;
          line-height: fn.rpx(20);
        }
        .name-a {
          margin-top: fn.rpx(10);
          font-size: fn.rpx(20);
          font-weight: bold;
          color: color.$base;
          line-height: fn.rpx(20);
        }
      }
    }
  }
}
</style>
